@material/animation

What is @material/animation?

@material/animation is a utility package from Material Design Components (MDC) that provides a set of functions and constants to help create smooth and consistent animations. It is designed to be used with other MDC components to ensure that animations follow Material Design guidelines.

What are @material/animation's main functionalities?

Animation Curves

Provides predefined animation curves such as easeInOut, easeOut, and easeIn that can be used to create smooth transitions and animations.

const { easeInOut, easeOut, easeIn } = require('@material/animation');

// Example usage in a CSS-in-JS style object
const styles = {
  transition: `all 250ms ${easeInOut}`
};

Animation Durations

Includes standard durations for animations, such as short, medium, and long, to ensure consistency across different components.

const { duration } = require('@material/animation');

// Example usage in a CSS-in-JS style object
const styles = {
  transitionDuration: `${duration.standard}ms`
};

Keyframe Animations

Provides utility functions to handle keyframe animations and ensure compatibility across different browsers.

const { getCorrectEventName } = require('@material/animation');

// Example usage in JavaScript
const animationEndEvent = getCorrectEventName(window, 'animationend');
element.addEventListener(animationEndEvent, () => {
  console.log('Animation ended');
});

Other packages similar to @material/animation

animejs

Anime.js is a lightweight JavaScript animation library with a simple, yet powerful API. It supports various types of animations including CSS properties, SVG, DOM attributes, and JavaScript objects. Compared to @material/animation, Anime.js offers a more extensive set of features and greater flexibility for complex animations.

gsap

GSAP (GreenSock Animation Platform) is a robust JavaScript library for high-performance animations. It is widely used for creating complex timelines and animations with precise control. GSAP provides more advanced features and customization options compared to @material/animation, making it suitable for more intricate animation needs.

velocity-animate

Velocity is an animation engine that combines the best of jQuery and CSS transitions. It offers a rich set of features for creating smooth animations and is known for its performance. While @material/animation focuses on Material Design guidelines, Velocity provides a more general-purpose solution for web animations.

README

Animation

MDC Animation is a Sass / CSS / JavaScript library which provides a toolbelt for Material Design animation, based off of the motion guidelines. Currently, it only covers easing curves.

Design & API Documentation

• Material Design guidelines: Duration & easing

Installation

npm install --save @material/animation

Usage

We currently have variables for the following 3 animation curves:

Variable name	timing function	use case
$mdc-animation-fast-out-slow-in-timing-function	cubic-bezier(.4, 0, .2, 1)	Standard curve; any animations that are visible from start to finish (e.g. a FAB transforming into a toolbar)
$mdc-animation-linear-out-slow-in-timing-function	cubic-bezier(0, 0, .2, 1)	Animations that cause objects to enter the screen (e.g. a fade in)
$mdc-animation-fast-out-linear-in-timing-function	cubic-bezier(.4, 0, ``, 1)	Animations that cause objects to leave the screen (e.g. a fade out)

SCSS

Simply drop mdc-animation into your build and start using the variables:

.mdc-thing--animating {
  animation: foo 175ms $mdc-animation-fast-out-slow-in-timing-function;
}

or the mixins, which simply assign their corresponding variables to the animation-timing-function property:

.mdc-thing--on-screen {
  @include mdc-animation-fast-out-linear-in;
}

Every mixin has the same name as its corresponding variable, without the -timing-function suffix.

MDC Animation also provides helper functions for defining transitions for when something enters and exits the frame. A very common example of this is something that fades in and then fades out using opacity.

@import "@material/animation/functions";

.mdc-thing {
  transition: mdc-animation-exit(/* $name: */ opacity, /* $duration: */ 175ms, /* $delay: */ 150ms);
  opacity: 0;
  will-change: opacity;

  &:active {
    transition: mdc-animation-enter(opacity, 175ms /*, $delay: 0ms by default */);
    opacity: 1;
  }
}

Note that these functions also work with the animation property.

@import "@material/animation/functions";

@keyframes fade-in {
  from {
    transform: translateY(-80px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.mdc-thing {
  animation: mdc-animation-enter(fade-in, 350ms);
}

CSS Classes

NOTE: dist/ will be available when installing via NPM.

Alternatively, you can include the built stylesheet and use the classes it exports within your HTML

<link href="path/to/mdc-animation/dist/mdc-animation.css" rel="stylesheet">
<!-- ... -->
<div id="my-animating-div" class="mdc-animation-fast-out-slow-in">hi</div>

CSS Classes have the exact same name as their mixin counterparts.

Overriding the default curves.

All animation variables are marked with !default, thus they can be overridden should the need arise.

JavaScript

MDC Web ships with a set of utility functions designed to make animations easier to implement.

Using Utility Functions

To use:

import {getCorrectEventName} from '@material/animation';

const eventToListenFor = getCorrectEventName(window, 'animationstart');

Method Signature	Description
getCorrectEventName(windowObj: Object, eventType: string)	Returns a JavaScript event name. Prefixed if necessary.
getCorrectPropertyName(windowObj: Object, eventType: string)	Returns a CSS property name. Prefixed if necessary.